<script setup lang="ts">
import { ref, unref } from "vue"
import { useMenuStoreHook } from "@/store/modules/menu"
import "element-tree-line/dist/style.css"
import { type Menu } from "@/api/menu/types/menu"

const useMenuStore = useMenuStoreHook()
const roleMenuTreeRef = ref()
const props = defineProps(["initMenuId"])

const treeData = ref()

/** 深度copy属性 */
const copyDfs = (trees: Menu[]) => {
  const result: Menu[] = []
  if (trees) {
    for (let i = 0; i < trees.length; i++) {
      const item = trees[i]
      if (item.menuType !== "permission" && !item.del) {
        result.push({ ...item })
        if (item.child) {
          item.child = copyDfs(item.child)
        }
      }
    }
  }
  return result
}

if (useMenuStore.menus !== null) {
  const treeShallow = useMenuStore.menus
  /** 删除permission */
  treeData.value = copyDfs(treeShallow)
}

const defaultProps = {
  children: "child",
  label: "meta.title"
}

/**
 * 树组件点击事件句柄方法
 */
const handleNodeClick = (node: any, data: any) => {
  useMenuStore.currendMenuOp(node.data)
  console.log(
    "%c 树组件点击事件句柄方法 %c handleNodeClick",
    "padding: 1px; background-color: #35495e; color: #fff",
    "padding: 1px; background-color: #5e7ce0; color: #fff"
  )
  console.log(
    "%c ∟ %c node %c =>",
    "text-indent: 10px",
    "padding: 1px; background-color: #41b883; color: #fff",
    "color: #000",
    node
  )
  console.log(
    "%c ∟ %c data %c =>",
    "text-indent: 10px",
    "padding: 1px; background-color: #41b883; color: #fff",
    "color: #000",
    data
  )
}

/** 维护被选中的数据 */
const selectMenuId = ref<string[]>([...unref(props.initMenuId)])
const checkChange = (menu: Menu, current: boolean) => {
  if (current) {
    selectMenuId.value.push(menu.id)
  } else {
    const id = menu.id,
      idx = selectMenuId.value.indexOf(id)
    if (idx >= 0) selectMenuId.value.splice(idx, 1)
  }
}

const close = () => {
  roleMenuTreeRef.value.setCheckedKeys([])
}

defineExpose({
  menuId: selectMenuId,
  close
})
</script>

<template>
  <div class="element-plus-tree">
    <el-tree
      ref="roleMenuTreeRef"
      @check-change="checkChange"
      :data="treeData"
      :props="defaultProps"
      :show-checkbox="true"
      :default-expand-all="true"
      :highlight-current="true"
      :expand-on-click-node="true"
      :default-checked-keys="initMenuId"
      node-key="id"
    >
      <template #default="{ node, data }">
        <span v-if="!node.isLeaf" style="display: flex; align-items: center">
          <el-icon v-if="node.data.menuType === 'catalogue'" style="margin: 0 6px 0 0px" size="16">
            <FolderOpened />
          </el-icon>
          <el-icon v-else style="margin: 0 6px 0 0px" size="16"><Folder /></el-icon>
          <small @click="handleNodeClick(node, data)">{{ node.data.meta.title }}</small>
        </span>
        <span v-else style="display: flex; align-items: center">
          <el-icon style="margin: 0 6px 0 0px" size="16"><Document /></el-icon>
          <small @click="handleNodeClick(node, data)">{{ node.data.meta.title }}</small>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<style lang="scss" scoped>
@import url("../../../../assets/font/index.css");

.element-plus-tree::-webkit-scrollbar {
  width: 6px;
}

.element-plus-tree::-webkit-scrollbar-thumb {
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

.element-plus-tree {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  background-color: rgb(228, 240, 245);
  overflow: auto;

  :deep(.el-tree) {
    background-color: rgb(228, 240, 245);
    margin: 10px 0 0 0;
    .el-tree-node__content {
      display: flex;
      font-size: 15px;
      height: 28px;
      i.el-icon {
        margin: 0 5px;
      }
    }
    .el-tree-node {
      // font-family: initial;
      font-size: 16px;
      /** 所有节点 */
      .el-tree-node__expand-icon {
        transform: rotate(0deg) skew(14deg, 0);
        -webkit-transform: rotate(0deg) skew(14deg, 0);
        font-size: 13px;
        svg {
          display: none;
        }
        &::before {
          position: relative;
          left: 2px;
          top: 6px;
          font-family: PixelIcon;
          display: block;
          width: 25px;
          height: 25px;
          content: "\e65b";
        }
      }
      .el-tree-node__expand-icon.expanded {
        transform: skew(14deg, 0);
        -webkit-transform: skew(14deg, 0);
        svg {
          display: none;
        }

        &::before {
          font-family: PixelIcon;
          display: block;
          width: 25px;
          height: 25px;
          content: "\e65a";
        }
      }
      .el-tree-node__expand-icon.is-leaf {
        margin-left: 0;
      }
      .el-checkbox {
        margin-left: 5px;
      }
    }

    /** 所有展开的节点 */
    .el-tree-node.is-current {
      .el-tree-node__content {
        small {
          color: var(--el-menu-active-color);
        }
      }

      .el-tree-node__children {
        small {
          color: #606266;
        }
      }
    }
  }
}
</style>
